<template>
    <Category :scene="scene"></Category>
    <el-card style="margin:10px 0">
        <div v-show="scene == 0">
            <el-button type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id ? false : true"
                @click="addSpu" v-has="`btn.Spu.add`">添加SPU</el-button>
            <!-- 展示已有的SPU数据 -->
            <el-table style="margin:10px 0" border :data="records">
                <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
                <el-table-column label="SPU操作">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSku(row)"
                            v-has="`btn.Spu.addsku`"></el-button>
                        <el-button type="success" size="small" icon="Edit" title="修改SPU" @click="updateSpu(row)"
                            v-has="`btn.Spu.update`"></el-button>
                        <el-button type="info" size="small" icon="View" title="查看SPU" @click="findSku(row)"
                            v-has="`btn.Spu.skus`"></el-button>
                        <el-popconfirm :title="`你确定删除这个${row.spuName}SPU吗`" width="200px" @confirm="deleteSpu(row)">
                            <template #reference>
                                <el-button type="danger" size="small" icon="Delete" title="删除SPU"
                                    v-has="`btn.Spu.delete`"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
                :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                @size-change="changeSize" @current-change="getHasSpu" />
        </div>
        <!-- 添加、修改SPU -->
        <SpuForm ref="spu" v-show="scene == 1" @changeScene="changeScene"></SpuForm>
        <!-- 添加SKU的 -->
        <SkuForm ref="sku" v-show="scene == 2" @changeScene="changeScene"></SkuForm>
        <!-- 对话框展示已有sku的数据 -->
        <el-dialog v-model="show" title="SKU列表">
            <el-table border :data="skuArr">
                <el-table-column label="SKU名字" prop="skuName"></el-table-column>
                <el-table-column label="SKU价格" prop="price"></el-table-column>
                <el-table-column label="SKU重量" prop="weight"></el-table-column>
                <el-table-column label="SKU图片">
                    <template #="{ row }">
                        <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px;;">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </el-card>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import useCategoryStore from '@/stores/modules/category';
import { ElMessage } from 'element-plus';
import SpuForm from './spuForm.vue';
import SkuForm from './skuForm.vue'
import { reqHasSpu, reqSkuList, reqRemoveSpu } from '@/api/product/spu';
import type { HasSpuResponseData, Records, SkuInfoData, SpuData, SkuData } from '@/api/product/spu/type';
let categoryStore = useCategoryStore()
//场景的数据
let scene = ref<number>(0); //0:显示已有SPU  1:添加或者修改已有SPU 2:添加SKU的结构

// 分页器数据
let pageNo = ref<number>(1)
let pageSize = ref<number>(3)
let total = ref<number>(0)
//存储已有的SPU的数据
let records = ref<Records>([])

//获取子组件实例SpuForm
let spu = ref<any>();
//获取子组件实例SkuForm
let sku = ref<any>();

//存储全部的SKU数据
let skuArr = ref<SkuData[]>([]);
// 对话框展示
let show = ref(false)
// 监听三级分类变化后请求已有数据
watch(() => categoryStore.c3Id, () => {
    if (!categoryStore.c3Id) return;
    getHasSpu()
})
let getHasSpu = async (pager = 1) => {
    pageNo.value = pager
    let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
    // 存储已有的spu数据
    records.value = result.data.records
    total.value = result.data.total
}

// 分页器发生变化的时候回调
const changeSize = () => {
    getHasSpu()
}
//添加新的SPU按钮的回调
const addSpu = () => {
    //切换为场景1:添加与修改已有SPU结构->SpuForm
    scene.value = 1;
    //点击添加SPU按钮,调用子组件的方法初始化数据
    spu.value.initAddSpu(categoryStore.c3Id);
}
const updateSpu = (row: SpuData) => {
    scene.value = 1
    spu.value.initHasSpuData(row)
}
//子组件SpuForm绑定自定义事件:目前是让子组件通知父组件切换场景为0
const changeScene = (obj: any) => {
    //子组件Spuform点击取消变为场景0:展示已有的SPU
    scene.value = obj.flag;
    if (obj.params == 'update') {
        //更新留在当前页
        getHasSpu(pageNo.value);
    } else {
        //添加留在第一页
        getHasSpu();
    }
}
//添加SKU按钮的回调
const addSku = (row: SpuData) => {
    //点击添加SKU按钮切换场景为2
    scene.value = 2;
    //调用子组件的方法初始化添加SKU的数据
    sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
}
// 查看sku列表数据
const findSku = async (row: SpuData) => {
    let result: SkuInfoData = await reqSkuList(row.id as number)
    if (result.code == 200) {
        skuArr.value = result.data;
        //对话框显示出来
        show.value = true;
    }

}
//删除已有的SPU按钮的回调
const deleteSpu = async (row: SpuData) => {
    let result: any = await reqRemoveSpu((row.id as number));
    if (result.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        });
        //获取剩余SPU数据
        getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}
</script>
<style lang="scss" scoped></style>